<template>
    <WidgetContainer :widget-id="config.id">
        <template #bottom>
            <div class="heard-box">
                <el-button type="primary" @click.stop="addTab" :icon="Plus" circle size="small" />
                <el-button type="danger" @click.stop="removeTab" :icon="Minus" circle size="small" />
            </div>
        </template>

        <el-tabs :class="config.attributes?.cssClass" v-show="!config.attributes.hidden" v-model="activeName" :tab-position="config.attributes.tabPosition"
            :type="config.attributes.tabType" class="tab-container">
            <el-tab-pane v-for="(tab, index) in config.children" :key="tab.id"
                :label="tab.attributes.label || ('Tab' + (index + 1))" :name="tab.id">
                <WidgetContainer :widget-id="tab.id">
                    <draggable v-model="tab.children" group="form" item-key="id" @add="onAdd" class="tab-draggable" :animation="150">
                        <template #item="{ element: child }">
                            <component :is="designer.renderComponent(child)" :config="child" />
                        </template>
                    </draggable>
                </WidgetContainer>
            </el-tab-pane>
        </el-tabs>
    </WidgetContainer>
</template>

<script setup>
import { ref, inject, onMounted, watch } from 'vue'
import { ElTabs, ElTabPane, ElButton } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
const selectWidgetId = inject('selectWidgetId')

const designer = inject('designer')
const widgetList = inject('widgetList')

const onAdd = (evt) => {
    selectWidgetId.value = evt?.item?._underlying_vm_?.id || selectWidgetId.value
};

const props = defineProps({
    config: {
        type: Object,
        required: true
    }
})

const activeName = ref('')

onMounted(() => {
    if (props.config.children.length == 0) {
        addTab()
    }
    activeName.value = props.config.children[0].id
})

watch(
    () => props.config.children.length,
    (len) => {
        if (len > 0) {
            activeName.value = props.config.children[props.config.children.length - 1].id
        }
    }
)

const addTab = () => {
    props.config.children.push({
        type: 'tabPane',
        label: '标签卡片',
        id: designer.generateUniqueId('tabPane',widgetList.value),
        isContainer: true,
        children: [],
        attributes: {
            label: `Tab ${props.config.children.length + 1}`
        }
    })
}

const removeTab = () => {
    if (props.config.children.length > 0) {
        props.config.children.pop()
        activeName.value = props.config.children.at(-1)?.id || ''
    }
}
</script>

<style scoped>
.heard-box {
    margin-bottom: 5px;
}

.tab-container {
    margin: 5px 0;
}

.tab-draggable {
    min-height: 100px;
    margin: 10px;
}

::v-deep(.el-tabs__content) {
  padding: 0 !important;
  margin: 0 !important;
}
::v-deep(.el-tabs__header){
    padding: 0 !important;
    margin: 2px !important;
}
</style>